import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { List, Icon } from 'antd-mobile';
import content from '../../../common/contentCss/content.css';
import CustTitle from '../../../common/title/title';
import NewPassword from './pages/newPassword/newPassword';
import OldPassword from './pages/oldPassword/oldPassword';
import ForgetPassword from './pages/forgetPassword/forgetPassword';


import CustomsItemNoIcon from '../../../../../common/items/CustomsItemNoIcon';
import Line from '../../../../../common/borderLine/Line';



function PutPassword({dispatch,loading,putPassword}) {

  const { title, oldPassword,status,phone,code } = putPassword
  console.log('title');
  console.log(title);
  const titleProps = {
    titleName: title,
    goBack(){
      history.go(-1);
      dispatch({
        type:'putPassword/querySuccess',
        payload:{
          status: 'oldPassword',
        }
      });
    }
  }

  console.log('oldPassword',oldPassword);

  const OldPasswordProps = {
    oldPassword,
    onNext(){
      dispatch({
        type:'putPassword/querySuccess',
        payload:{
          status: 'newPassword'
        }
      })
    },
    forget(){
      dispatch({
        type:'putPassword/querySuccess',
        payload:{
          status: 'forgetPassword',
          title: '忘记支付密码',
        }
      });
    }
  }
  const NewPasswordProps = {
    oldPassword,
    onSubmit(data){
      dispatch({
        type:'putPassword/querySuccess',
        payload:{
          status: 'oldPassword',
          oldPassword: data,
        }
      });
      dispatch(routerRedux.push({
        pathname: '/set-my-wallet',
      }));
    }
  }

  const ForgetPasswordProps = {
    oldPassword,
    phone,
    code,
    onNext(){
      dispatch({
        type:'putPassword/querySuccess',
        payload:{
          status: 'newPassword'
        }
      })
    }
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F5F5F9'}}></div>;

  return(
    <div className={content.content}>
      <CustTitle {...titleProps}/>
      <div style={{
        marginTop: '2.8125em',
      }}>
      </div>
      <Line />
      {status == 'oldPassword'? (<OldPassword {...OldPasswordProps} />): ''}
      {status == 'newPassword'? (<NewPassword {...NewPasswordProps}/>): ''}
      {status == 'forgetPassword'? (<ForgetPassword {...ForgetPasswordProps}/>): ''}

    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    putPassword:state.putPassword,

  }
}

export default connect(mapStateToProps)(PutPassword);
